:root{
    --background-color:#f5f5f5;
    --border-color:#7591AD;
    --color1:#00a1d6;
}
*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 400px;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon{
    position: relative;
    width: 70px;
    height: 70px;
    color: var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon i{
    font-size: 50px;
}
.icon:hover{
    color: var(--color1);
}
.icon.light{
    color: var(--color1);
}
.icon.shake{
    animation: shake 0.3s linear infinite;
}
@keyframes shake{
    0% {
        transform: translate(-5%,-5%);
    }
    25% {
        transform: translate(5%,5%);
    }
    50% {
        transform: translate(-5%,5%);
    }
    75% {
        transform: translate(5%,-5%);
    }
    100% {
        transform: translate(0%,0%);
    }
}
.icon.loading::after {
    position: absolute;
    content: '';
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid orangered;
    transform: rotate(45deg);
    animation: loading 2.9s cubic-bezier(.25, .45, .75, .55) 1;
}
@keyframes loading{
    0% {
        clip-path: polygon(
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            50% 50%
        );
    }
    25% {
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            50% 50%
        );
    }
    50% {
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 50%
        );
    }
    75% {
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0% 100%,
            50% 50%
        );
    }
    90% {
        /* 从90%开始逐渐隐藏 */
        opacity: 1;
    }
    
    100% {
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0% 0%,
            50% 50%
        );
        opacity: 0;
    }
}
.icon.bang {
    animation:  grow 0.3s linear 1;
}
@keyframes grow{
    0%{
        transform: scale(0.8);
    }
    100%{
        transform: scale(1.2);
    }
}
.icon.bang .shine {
    position: absolute;
    top: 0;
    width: 70px;
    height: 70px;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon.bang .shine::after{
    position: absolute;
    content: '';
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50% -50%);
    border-radius: 50%;
    animation: ray_border 0.4s linear 1 both;
}
@keyframes ray_border{
    0%{
        width: 20px;
        height: 20px;
        border: 2px solid var(--color1);
        opacity: .1;
    }
    60%{
        width: 100px;
        height: 100px;
        border: 20px solid var(--color1);
        opacity: .1;
    }
    100%{
        width: 120px;
        height: 120px;
        border: 2px solid var(--color1);
        opacity: 0;
    }
}
/* 这是射线 */
.icon.bang .shine span{
    position: absolute;
    display: block;
    width: 5px;
    border-radius: 50%;
    background-color: var(--color1);
    transform: rotate(calc(var(--i) * 22.5deg)) translateY(0px);
}
.icon.bang .shine span:nth-child(even){
    height: 15px;
    animation: ray_even 0.6s ease 1 both;
}
.icon.bang .shine span:nth-child(odd){
    height: 8px;
    animation: ray_odd 0.6s ease 1 both;
}
@keyframes ray_even{
    0%{
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(0px);
    }
    60%{
        opacity: 0.8;
        height: 15px;
    }
    100%{
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(60deg);
        height: 5px;
        opacity: 0;
    }
}
@keyframes ray_odd{
    0%{
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(0px);
    }
    60%{
        opacity: 0.8;
        height: 8px;
    }
    100%{
        transform: rotate(calc(var(--i) * 22.5deg)) translateY(65deg);
        height: 8px;
        opacity: 0;
    }
}